<!-- eslint-disable vue/no-mutating-props -->
<template>
  <td>
    <div class="my-tag">
      <input class="input"
             type="text"
             placeholder="输入标签"
             v-if="edit"
             v-model="tag"
             v-select
             @blur="hiddenInput"
             @keyup.enter="hiddenInput" />
      <div class="text"
           v-else
           @dblclick="showInput">{{value}}</div>
    </div>
  </td>
</template>

<script>
export default {
  data () {
    return {
      edit: false,
      tag:''
    }
  },
  methods: {
    showInput () {
      this.edit = true
      //显示input用自己的数据
      this.tag=this.value
    },
    hiddenInput(){
      this.edit=false
      this.$emit('input',this.tag)
    }
  },
  props: {
    value: {
      type: [String, Number],
      required: true
    }
  }
}
</script>

<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>